<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/layui-2.4.2/src/css/layui.css">
    <script type="text/javascript" src="/jquery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="/layui-2.4.2/src/layui.js"></script>
</head>
<body>
<div>
    <div class="layui-form layui-form-pane">
        <div class="layui-form-item row">
            <div class="layui-inline">
                <label class="layui-form-label" style="width: auto;">洲别</label>
                <div class="layui-input-inline layuiws">
                    <select name="state_select" lay-filter="state_select" class="state_select">
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label" style="width: auto;">国家</label>
                <div class="layui-input-inline layuiws">
                    <select name="country_select" lay-filter="country_select" class="country_select">
                    </select>
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label" style="width:auto;">城市</label>
                <div class="layui-input-inline layuiws">
                    <select name="city_select" lay-filter="city_select" class="city_select">
                    </select>
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label" style="width:auto;">状态</label>
                <div class="layui-input-inline layuiws">
                    <select name="status_select" class="status_select" lay-filter="status_select">
                        <option value="">请选择</option>
                        <option value="1">上架</option>
                        <option value="0">下架</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="layui-form-item row">
            <div class="layui-inline">
                <button class="layui-btn" id="search">搜索</button>
                <button class="layui-btn" id="createRoute">新增路线</button>
            </div>
        </div>
    </div>

    <div class="layui-row">
        <table id="route_list_view" lay-filter="route_filter">

        </table>
    </div>
</div>
</body>


<script type="text/html" id="toolOper">

    {{#  if(d.dr == 0){ }}
    <a class="layui-btn layui-btn-xs" lay-event="updateStatus">上架</a>
    {{#  } }}
    {{#  if(d.dr == 1){ }}
    <a class="layui-btn layui-btn-xs" lay-event="updateStatus">下架</a>
    {{#  } }}

</script>

<!--路线编辑浮层-->
<form class="layui-form" id="edit_route" action="" style="display:none;margin-top: 30px;">
    <div class="layui-form-item">
        <label class="layui-form-label">线路名称</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="routeName" id="routeName" autocomplete="off" placeholder="请输入线路名称"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">洲别</label>
        <div class="layui-input-block layui-form" style="margin-right:20px;">
            <select name="stateId" lay-filter="state_form" id="stateId" class="state_form layui-form">
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">国家</label>
        <div class="layui-input-block layui-form" style="margin-right:20px;">
            <select name="countryId" lay-filter="country_form" id="countryId" class="country_form layui-form">
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">城市</label>
        <div class="layui-input-block layui-form" style="margin-right:20px;">
            <select name="cityId" lay-filter="city_form" class="city_form" id="cityId">
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">车型</label>
        <input type="hidden" name="carModelIds" id="carModelIds"/>
        <div class="layui-input-block model_select" id="carModelId" name="carModelId">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-upload">
            <button type="button" class="layui-btn" id="btnTitle"
                    style="margin-left:340px;padding-left: 5px;padding-right: 5px;">点击上传路线标题图片
            </button>
            <br/>
            <div class="layui-row titlePhoto" style="margin-left: 40px;margin-left: 40px;">

            </div>
            <input type="hidden" name="titlePhotoUrl" id="titlePhotoUrl" class="titlePhotoUrl"/>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-upload">
            <button type="button" class="layui-btn" id="btnInfo"
                    style="margin-left:340px;margin-top: 10px;padding-left: 5px;padding-right: 5px;">点击上传路线详情图片
            </button>
            <br/>
            <div class="layui-row infoPhoto" style="margin-left: 40px;margin-left: 40px;">

            </div>
            <input type="hidden" name="infoPhotoUrl" id="infoPhotoUrl" class="infoPhotoUrl"/>
        </div>
    </div>
</form>


<script>
    layui.use(['element', 'table', 'upload', 'laytpl', 'form'], function () {
        var table = layui.table;
        var form = layui.form;
        var upload = layui.upload;
        table.render({
            elem: '#route_list_view',
            url: '/popularRoute/queryList',
            page: true,
            page: 10,
            limits: [10, 20, 50, 100],
            cols: [
                [
                    {field: 'routeId', title: '线路编号', width: 200},
                    {field: 'routeName', title: '线路名称', width: 350},
                    {
                        field: 'lowestRMB', title: '线路价格', width: 300, templet: function (d) {
                            return d.lowestRMB + 'RMB 起';
                        }
                    },
                    {
                        field: 'dr', title: '线路状态', width: 150, templet: function (d) {
                            if (d.dr === 0) return '下架';
                            if (d.dr === 1) return '上架';

                        }
                    },
                    {field: 'honeySugar', title: '操作', toolbar: '#toolOper', width: 350}
                ]
            ],
            response: {
                status: 'errorCode',
                countName: 'total',
                dataName: 'data'
            }
        });

        $("#search").on('click', function () {
            table.reload('route_list_view', {
                url: '/popularRoute/queryList',
                where: {
                    stateId: $('.state_select').val(),
                    countryId: $('.country_select').val(),
                    cityId: $('.city_select').val(),
                    status: $('.status_select').val()
                }
            });
        });


        $('#createRoute').on('click', function () {
            $(".state_form").html('');
            $.ajax({
                type: 'post',
                url: '/tripcar/getState',
                cache: false,
                dataType: 'json',
                success: function (res) {
                    var optionHtml = '';
                    $(".state_form").append('<option value="">请选择</option>');
                    for (var i = 0; i < res.data.length; i++) {
                        optionHtml += '<option value="' + res.data[i].stateId + '">' + res.data[i].stateName + '</option>';
                    }
                    $(".state_form").append(optionHtml);
                    form.render('select');
                }
            });
            setCarModel();
            editRouteFunc("新增路线");
        });

        //标题图片上传
        upload.render({
            elem: '#btnTitle'
            , url: '/upload/image',
            data: {typeId: 4}
            , done: function (res) {
                //上传完毕
                if (res.success == true) {
                    var img = '<div style="width:80px;float:left;display:inline-block;"><img class="layui-col-md1 src_title_path" style="margin-left:340px;width:80px;height:80px;" src="' + res.data + '"/>' +
                        '<p><a href="javascript:" class="delImg" style="position: absolute;\n' +
                        '    transform: translate(-53px, 82px);">删除</a></p></div>';
                    $(".titlePhoto").append(img);
                }
            }
        });
        //详情图片上传
        upload.render({
            elem: '#btnInfo'
            , url: '/upload/image',
            data: {typeId: 4}
            , done: function (res) {
                //上传完毕
                if (res.success == true) {
                    var img = '<div style="width:80px;float:left;display:inline-block;"><img class="layui-col-md1 src_info_path" style="margin-left:340px;width:80px;height:80px;" src="' + res.data + '"/>' +
                        '<p><a href="javascript:" class="delImg" style="position: absolute;\n' +
                        '    transform: translate(-53px, 82px);">删除</a></p></div>';
                    $(".infoPhoto").append(img);
                }
            }
        });
        $(document).on('click', '.delImg', function () {
            $(this).parent().parent().remove();
        });

        var editRouteFunc = function (title) {
            layer.open({
                type: 1,
                title: title,
                area: ['880px', '600px'],
                content: $("#edit_route"),
                btn: ['保存', '取消'],
                btnALign: 'c',
                yes: function (index, layero) {
                    var titleUrl;
                    var infoUrl;
                    $.each($(".src_title_path"), function (index, item) {
                        titleUrl = $(item).attr('src');
                    });
                    $.each($(".src_info_path"), function (index, item) {
                        infoUrl = $(item).attr('src');
                    });
                    if ($("#routeName").val() == '') {
                        alert('请输入路线名称');
                        return;
                    }

                    if ($("#stateId").val() == '' || $("#stateId").val() == 'undefined' || $("#stateId").val() == null || $("#stateId").val() == 0) {
                        alert('请选择洲');
                        return;
                    }
                    if ($("#countryId").val() == '' || $("#countryId").val() == 'undefined' || $("#countryId").val() == null || $("#countryId").val() == 0) {
                        alert('请选择国家');
                        return;
                    }
                    if ($("#cityId").val() == '' || $("#cityId").val() == 'undefined' || $("#cityId").val() == null || $("#cityId").val() == 0) {
                        alert('请选择城市');
                        return;
                    }
                    var arr = [];
                    $("input:checkbox[name='carModelId']:checked").each(function (i) {
                        arr[i] = $(this).val();
                    });
                    $('#carModelIds').attr('value', arr);
                    if ($("#carModelIds").val() == '' || $("#carModelIds").val() == 'undefined') {
                        alert('请选择车型');
                        return;
                    }
                    if (titleUrl == undefined || titleUrl == '') {
                        alert('请上标题图片');
                        return;
                    }
                    if (infoUrl == undefined || infoUrl == '') {
                        alert('请上详情图片');
                        return;
                    }
                    $('.titlePhotoUrl').attr('value', titleUrl);
                    $('.infoPhotoUrl').attr('value', infoUrl);
                    $.ajax({
                        type: 'post',
                        data: $('#edit_route').serialize(),
                        url: '/popularRoute/edit',
                        cache: false,
                        dataType: 'json',
                        success: function (data) {
                            layer.closeAll();
                            $(".layui-laypage-btn").click()
                        }
                    });
                },
            });


        };


        $.ajax({
            type: 'post',
            url: '/tripcar/getState',
            cache: false,
            dataType: 'json',
            success: function (res) {
                var optionHtml = '';
                $(".state_select").append('<option value="">请选择</option>');
                for (var i = 0; i < res.data.length; i++) {
                    optionHtml += '<option value="' + res.data[i].stateId + '">' + res.data[i].stateName + '</option>';
                }
                $(".state_select").append(optionHtml);
                form.render('select');
            }
        });

        form.on('select(state_select)', function (data) {
            var stateId = $('.state_select').val();
            setCountryByStateId(stateId, $('.country_select'), 0);
        });

        form.on('select(state_form)', function (data) {
            var stateId = $('.state_form').val();
            setCountryByStateId(stateId, $('.country_form'), 0);
        });

        function setCarModel() {
            $(".model_select").html('');
            $.ajax({
                type: 'post',
                url: '/carModel/getCarModels',
                cache: false,
                dataType: 'json',
                success: function (res) {
                    if (res.code == 0) {
                        var optionHtml = '';
                        for (var i = 0; i < res.data.length; i++) {
                            optionHtml += '<input type="checkbox" name="carModelId" value="' + res.data[i].modelId + '" title="' + res.data[i].modelName + '"/>';
                        }
                        $(".model_select").append(optionHtml);
                        form.render('checkbox');
                    }
                }
            });
        }


        function setCountryByStateId(stateId, countrySelect, editInitCity) {
            $.ajax({
                type: 'post',
                url: '/tripcar/getCountryByStateId',
                data: {stateId: stateId},
                cache: false,
                dataType: 'json',
                success: function (data) {
                    if (data.code == 0) {
                        var optionHtml = '';
                        if (editInitCity <= 0) {
                            optionHtml = '<option value="0">未选择</option>';
                        }
                        if (data.data != null && data.data.length > 0) {
                            for (var i = 0; i < data.data.length; i++) {
                                optionHtml += '<option value="' + data.data[i].countryId + '">' + data.data[i].countryName + '</option>';
                            }
                        } else {
                            optionHtml = '<option value="0">未选择</option>';
                        }
                        $(countrySelect).html('');
                        $(countrySelect).append(optionHtml);
                    }
                    form.render('select');
                    if (editInitCity > 0) {
                        var select = 'dd[lay-value=' + editInitCity + ']';
                        $(countrySelect).siblings("div.layui-form-select").find('dl').find(select).click();
                    }
                }
            });
        }

        form.on('select(country_select)', function (data) {
            var countryId = $('.country_select').val();
            setCityByCountryId(countryId, $('.city_select'), 0);
        });

        form.on('select(country_form)', function (data) {
            var countryId = $('.country_form').val();
            setCityByCountryId(countryId, $('.city_form'), 0);
        });

        function setCityByCountryId(countryId, citySelect, editInitCity) {
            $.ajax({
                type: 'post',
                url: '/tripcar/getCity',
                data: {countryId: countryId},
                cache: false,
                dataType: 'json',
                success: function (citys) {
                    if (citys.code == 0) {
                        var optionHtml = '';
                        if (editInitCity <= 0) {
                            optionHtml = '<option value="0">未选择</option>';
                        }
                        if (citys.data != null && citys.data.length > 0) {
                            for (var i = 0; i < citys.data.length; i++) {
                                optionHtml += '<option value="' + citys.data[i].cityId + '">' + citys.data[i].cityName + '</option>';
                            }
                        } else {
                            optionHtml = '<option value="0">未选择</option>';
                        }
                        $(citySelect).html('');
                        $(citySelect).append(optionHtml);
                    }
                    form.render('select');
                    if (editInitCity > 0) {
                        var select = 'dd[lay-value=' + editInitCity + ']';
                        $(citySelect).siblings("div.layui-form-select").find('dl').find(select).click();
                    }
                }
            });
        }

        table.on('tool(route_filter)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
            var routeId = data.routeId;
            var dr;
            if (layEvent === 'updateStatus') {
                if (data.dr == 1) {
                    dr = 0;
                } else {
                    dr = 1;
                }
                $.ajax({
                    type: 'get',
                    data: {routeId: routeId, dr: dr},
                    url: '/popularRoute/updateRouteStatus',
                    cache: false,
                    success: function (data) {
                        if (data.success == true) {
                            $(".layui-laypage-btn").click();
                        }
                    }
                })
            }
        });


    });


</script>
</html>